<template>
  <div>
    <div class="device-style">
      <ElRow :gutter="10">
        <ElCol :span="6" v-for="(item, index) in quickNavList" :key="index">
          <div @click="changeView(item.id)" class="device-icon"></div>
          <!-- <ElIcon :size="20"><Menu /></ElIcon> -->
        </ElCol>
      </ElRow>
    </div>
    <div>
      <h3 class="control-management-title">在线设备</h3>
      <div v-for="(item, index) in deviceList" :key="index">
        <div class="device-list">
          <div class="device-left">
            <img
              class="device-icon"
              src="../../../../../assets/home.png"
              alt=""
            />
            <p class="device-status">
              <Edit style="width: 1em; height: 1em; margin-right: 8px" />
              已连接
              <!-- <ElIcon :icon="CircleCheck"> </ElIcon> {{ item.status }} -->
            </p>
          </div>
          <div class="device-right">
            <p class="device-model">{{ item.Id }}</p>
            <span class="device-name">{{ item.name }} </span>
            <span>{{ item.frequency }} </span>
            <p class="device-time">{{ item.distance }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ElRow, ElCol, ElIcon } from 'element-plus';
import { ref, onMounted, onBeforeUnmount, defineProps } from 'vue';
const props = defineProps({ deviceList: Array, quickNavList: Array });
const emit = defineEmits(['changeView']);
const changeView = (item) => {
  emit('changeView', item);
};
</script>
<style lang="scss" scoped>
.device-style {
  padding: 20px 85px;
  margin-top: -10px;

  .device-icon {
    width: 30px;
    height: 30px;
    border: 1px solid #fff;
  }
}

.control-management-title {
  margin: 25px 0 20px 47px;
}

.device-list {
  display: flex;
  align-items: center;
  padding: 20px;
  margin-bottom: 20px;
  text-align: center;
  border: 1px solid #fff;

  .device-left {
    flex: 1;

    .device-icon {
      width: 150px;
      height: 75px;
      margin-bottom: 15px;
    }

    .device-status {
      font-size: 12px;
      color: #7fce24;
    }
  }

  .device-right {
    flex: 1;
    margin-top: 10px;
    font-size: 12px;

    .device-model {
      height: 25px;
      margin-bottom: 15px;
      font-size: 18px;
      font-weight: bold;
      line-height: 25px;
    }

    .device-name {
      margin-right: 20px;
      font-size: 14px;
    }

    .device-time {
      margin: 18px 0 15px;
    }
  }
}
</style>
